<template>
  <div class="app-container">
    <div class="searchBox">
      <el-form :inline="true">
        <el-form-item label="查询条件1：" >
          <el-input v-model="search.demo1" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="查询条件2：" >
          <el-input v-model="search.demo2" placeholder="请输入内容" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="searchQuery">查询</el-button>
          <el-button
            type="info"
            @click="
              search = {};
              searchQuery();
            "
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <qm-table
      ref="qmTable"
      :data="query"
      key-prop="demoId"
      :form-validate="defaultFormValidate"
      is-custom-form
      menu-type="text"
      :menu-options="{ width: 350 }"
      :showSeniorExport="true"
      seniorExportUrl="/admin/sysBasicDemo/excelExport"
      :exportModalOptions="{
        title: '自定义高级导出'
      }"
    >
      <qm-table-column field="demoName" sortable="true">demoName</qm-table-column>
      <qm-table-column field="status" sortable="true" width="120px" 
       fieldtype="enum"
       :enumOptions="[
          { key: '成功', value: true },
          { key: '失败', value: false },
        ]"
      >status</qm-table-column>
      <qm-table-column field="createdDate" sortable="true">createdDate</qm-table-column>

      <template #form="{ models, controlData, pageAction, disabled }">
        <create
          ref="create"
          :models="models"
          :control-data="controlData"
          :page-action="pageAction"
          :disabled="disabled"
        />
      </template>

      <template #toolbar>
        <el-button type="success" @click="excelExport('.xlsx')">导出Excel</el-button>
        <el-button type="success" @click="excelExportByTemplate('.xlsx')">按模板导出Excel</el-button>
        <el-button type="success" @click="excelExport('.et')">导出WPS表格</el-button>
        <el-button type="success" @click="propExportVisible = true">按属性顺序导入</el-button>
        <el-button type="success" @click="flagExportVisible = true">按标记导入</el-button>
        <el-button type="success" @click="docConvPdfVisible = true">文档转PDF</el-button>
      </template>

      <template #moreBtn="{ row }">
        <el-dropdown trigger="click">
          <el-button class="padding-left" type="text">导出文档</el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="wordExport(row.demoId, '.docx')">word 导出</el-dropdown-item>
            <el-dropdown-item @click.native="wordExport(row.demoId, '.wps')">wps 导出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown trigger="click">
          <el-button class="padding-left" type="text">导出PDF</el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="pdfExport(row.demoId, 0)">PDF 导出</el-dropdown-item>
            <el-dropdown-item @click.native="pdfExport(row.demoId, 1)">PDF 导出文字水印</el-dropdown-item>
            <el-dropdown-item @click.native="pdfExport(row.demoId, 2)">PDF 导出图片水印</el-dropdown-item>
            <el-dropdown-item @click.native="pdfExport(row.demoId, 3)">OFD 导出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown trigger="click">
          <el-button class="padding-left" type="text">tl模版引擎</el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="tlExport(row.demoId, 0)">框架示例</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </qm-table>

    <qm-modal
      v-model="propExportVisible"
      title="按属性顺序导入"
      path="/admin/excelImport/importByOrder"
      :params="{ uploadUrl: '/admin/sysBasicDemo/excelImportByOrder' }"
      :width="600"
      :height="400"
    />
    <qm-modal
      v-model="flagExportVisible"
      title="按标记导入"
      :width="600"
      :height="400"
      path="/admin/excelImport/importBySign"
      :params="{ uploadUrl: '/admin/sysBasicDemo/excelImportBySign' }"
    />
    <qm-modal
      v-model="docConvPdfVisible"
      title="文档转PDF"
      :width="600"
      :height="400"
      path="/admin/excelImport/conversionPdf"
    />
  </div>
</template>

<script>
import Controller from "@/libs/framework/controller";
import Create from "./create";
export default class Instance extends Controller {
  onBeforeInit() {
    this.urls = {
      model: "/admin/sysBasicDemo/getListModel",
      query: "/admin/sysBasicDemo/query",
      save: "/admin/sysBasicDemo/save",
      delete: "/admin/sysBasicDemo/delete",
      entity: "/admin/sysBasicDemo/getEntity"
    };
  }

  mixin() {
    return {
      components: {
        Create
      },
      data() {
        return {
          propExportVisible: false,
          flagExportVisible: false,
          docConvPdfVisible: false
        };
      },
      methods: {
        wordExport(demoId, postfix) {
          location.href = `${process.env.VUE_APP_SERVER}/admin/sysBasicDemo/wordExport?demoId=${demoId}&postfix=${postfix}`;
        },

        pdfExport(demoId, type) {
          location.href = `${process.env.VUE_APP_SERVER}/admin/sysBasicDemo/pdfExport?demoId=${demoId}&markType=${type}`;
        },

        excelExport(postfix) {
          this.$refs["qmTable"].excelExport(postfix);
        },

        excelExportByTemplate(postfix) {
          location.href = `${process.env.VUE_APP_SERVER}/admin/sysBasicDemo/excelExportByTemplate?postfix=${postfix}`;
        },

        tlExport(demoId, type) {
          switch (type) {
            case 1:
              break;
            default:
              location.href = `${process.env.VUE_APP_SERVER}/admin/sysBasicDemo/exportByTl?demoId=${demoId}`;
              break;
          }
        }
      }
    };
  }
}
</script>

<style scoped lang="scss">
.padding-left {
  padding-left: 12px;
}
</style>
